package com.csw.compose.ui.module.component.advanced

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.twotone.ArrowBack
import androidx.compose.material.icons.filled.AccountBox
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Call
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.Share
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationBarItemColors
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Snackbar
import androidx.compose.material3.SnackbarData
import androidx.compose.material3.SnackbarDuration
import androidx.compose.material3.SnackbarVisuals
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarColors
import androidx.compose.material3.TopAppBarDefaults.pinnedScrollBehavior
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.App
import com.csw.compose.ex.clickThrottle
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.MiniSpacer
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage


@Preview
@Composable
fun ScaffoldPagePreview() {
    BasePage({}, "脚手架（Scaffold）") {
        ScaffoldPage()
    }
}

class ScaffoldPageData {
    companion object : Destination("ScaffoldPage")
}

/**
 * [脚手架](https://developer.android.google.cn/develop/ui/compose/components/scaffold?hl=zh-cn)
 * [应用栏](https://developer.android.google.cn/develop/ui/compose/components/app-bars?hl=zh-cn)
 * [快捷信息栏](https://developer.android.google.cn/develop/ui/compose/components/snackbar?hl=zh-cn)
 * [悬浮操作按钮](https://developer.android.google.cn/develop/ui/compose/components/fab?hl=zh-cn)
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldPage() {
    //页面脚手架，包含顶部、底部导航栏、悬浮按钮等标准页面框架
    val showSnackbar = remember { mutableStateOf(false) }
    val selectedMenu = remember { mutableIntStateOf(1) }
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("标题") },
                navigationIcon = {
                    Icon(
                        Icons.AutoMirrored.TwoTone.ArrowBack,
                        "返回",
                        modifier = Modifier.clickThrottle {
                        })
                },
                actions = {
                    Icon(Icons.Filled.Add, "添加")
                    Icon(Icons.Filled.MoreVert, "更多")
                },
                colors = TopAppBarColors(
                    MaterialTheme.colorScheme.primaryContainer,
                    MaterialTheme.colorScheme.primaryContainer,
                    MaterialTheme.colorScheme.onPrimaryContainer,
                    MaterialTheme.colorScheme.onPrimaryContainer,
                    MaterialTheme.colorScheme.onPrimaryContainer,
                ),
                scrollBehavior = pinnedScrollBehavior()
            )
        },
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                tonalElevation = 10.dp,
            ) {
                val navigationBarItemColors = NavigationBarItemColors(
                    MaterialTheme.colorScheme.onPrimaryContainer,
                    MaterialTheme.colorScheme.onPrimaryContainer,
                    Color.Transparent,
                    MaterialTheme.colorScheme.primary,
                    MaterialTheme.colorScheme.primary,
                    Color.Gray,
                    Color.Gray,
                )
                NavigationBarItem(
                    selectedMenu.intValue == 0,
                    { selectedMenu.intValue = 0 },
                    { Icon(Icons.Filled.Call, "拨号") },
                    label = { Text("拨号") },
                    colors = navigationBarItemColors
                )
                NavigationBarItem(
                    selectedMenu.intValue == 1,
                    { selectedMenu.intValue = 1 },
                    {
                        Icon(
                            Icons.Filled.AccountBox,
                            "联系人"
                        )
                    },
                    label = { Text("联系人") },
                    colors = navigationBarItemColors
                )
                NavigationBarItem(
                    selectedMenu.intValue == 2,
                    { selectedMenu.intValue = 2 },
                    {
                        Icon(
                            Icons.Filled.Email,
                            "消息"
                        )
                    },
                    label = { Text("消息") },
                    colors = navigationBarItemColors
                )
            }
        },
        snackbarHost = {
            if (showSnackbar.value) {
                Snackbar(object : SnackbarData {
                    override val visuals: SnackbarVisuals = object : SnackbarVisuals {
                        override val actionLabel: String = "查看"
                        override val duration: SnackbarDuration = SnackbarDuration.Short
                        override val message: String = "消息"
                        override val withDismissAction: Boolean = true
                    }

                    override fun dismiss() {
                        App.SHOW_APP_TOAST("正在关闭通知")
                        showSnackbar.value = false
                    }

                    override fun performAction() {
                        App.SHOW_APP_TOAST("查看详情")
                        showSnackbar.value = false
                    }
                })
            }
        },
        floatingActionButton = {
            FloatingActionButton({ showSnackbar.value = true }) {
                Icon(Icons.Filled.Share, "分享")
            }
        },
    ) {
        // 它对内容组件提供了一个padding值，还必须使用，否则就会报错，它的警告信息提示若不使用padding，可能导致页
        // 面内容被遮挡
        Box(modifier = Modifier.padding(it)) {
            Column(
                modifier = Modifier
                    .padding(horizontal = pagePadding)
                    .verticalScroll(rememberScrollState())
            ) {
                PrimaryTitle("简介")
                BodyText("Scaffold 意为脚手架，用于快速搭建通用页面，通常由以下部件组成，脚手架很好的将他们组织在一起")
                MiniSpacer()
                UlItem("topBar")
                LabelText("顶部标题栏，compose提供了几种实现（TopAppBar、CenterAlignedTopAppBar、MediumTopAppBar、LargeTopAppBar）")
                MiniSpacer()
                UlItem("bottomBar")
                LabelText("底部导航栏，BottomAppBar")
                MiniSpacer()
                UlItem("snackbarHost")
                LabelText("通知条，Snackbar")
                MiniSpacer()
                UlItem("floatingActionButton")
                LabelText("悬浮按钮，FloatingActionButton")
            }
        }
    }
}